<template>
    <div class="table">
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i>优惠券管理-编辑优惠券</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="container">
                <el-form ref="form" label-width="160px">
                    <el-form-item label="优惠券名称：">
                        <el-input v-model="name" placeholder="请输入优惠券名称" style="width:600px"></el-input>
                    </el-form-item>
                    <el-form-item label="优惠券面额：">
                        <el-input :disabled="true" v-model="deductionMoney" placeholder="请输入优惠券面额"  style="width:600px"></el-input>
                    </el-form-item>
                    <el-form-item label="使用满减金额：">
                        <el-input :disabled="true" v-model="conditionMoney" placeholder="请输入使用满减金额" style="width:600px"></el-input>
                    </el-form-item>
                    <el-form-item label="是否设置分享：">
                        <el-radio v-model="isOpen" label="1" border >分享</el-radio>
                        <el-radio v-model="isOpen" label="0" border>不分享</el-radio>
                    </el-form-item>
                    <el-form-item label="发放总量：">
                        <el-input :disabled="true" v-model="shareNum" placeholder="请输入优惠券总量" style="width:600px"></el-input>
                    </el-form-item>
                    <el-form-item label="使用截止日期：">
                         <el-date-picker value-format="yyyy-MM-dd HH-mm-ss" v-model="expireTime" type="datetime" class="handle-date" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" size="medium " @click="onSubmit">保 存</el-button>
                    </el-form-item>
                </el-form>
                
            </div>
        </div>
</template>
<script>
export default {
    name:"couponEdit",
    data (){
        return{
            id:'',//优惠券id
            name:'',//优惠券名称
            deductionMoney:'',//优惠券面额
            conditionMoney:'',//使用满减金额
            shareNum:'',//发放数量
            expireTime:'',//截止时间
            isOpen:"1"//是否设置分享，默认分享
        }
    },
    created (){
        this.id = this.$route.params.id;//获得id
        //console.log(this.id);
        
        //获取详情数据
        this.getCouponData();
    },
    methods:{
        //获得优惠券详情
        getCouponData(){
        
            this.$axios.get('/manage/coupon/detail',{
                    params: {
                      id:this.id
                    }
                })
                .then(response=>{
                    // console.log(response);
                    if(response.data.code==200){
                        let data = response.data.data;
                        // console.log(data);    
                        console.log(data.is_open);
                        //判断是否分享
                        if(data.is_open == 1){
                            //分享
                            this.isOpen = "1";
                        }else{
                            this.isOpen = "0";
                        }
        
                        this.name = data.name;
                        this.deductionMoney = data.deduction_money;
                        this.conditionMoney = data.condition_money;
                        this.shareNum = data.share_num;
                        this.expireTime = data.expire_time;
                       
                    }else{
                        console.log(response.data.msg)  
                    }
                })
                .catch(error=>{
                    console.log(error); 
                });
        },
        //触发项目类型
        changeType(event){
            console.log(event);
            if(event==1){
                //分享
                this.isOpen = 1;  
            }else{
                //不分享
                this.isOpen = 0;   
            }
        },
        //确认修改
        onSubmit (){
            
            if(this.name==""){
                this.$notify.info({title: '提示',message: '请填写优惠券名称'});
                return false;
            }else if(this.expireTime==''){
                this.$notify.info({title: '提示',message: '请填写优惠券使用截止时间'});
                return false;
            }else{
                const param ={
                    id:this.id,
                    name:this.name,
                    deductionMoney:this.deductionMoney,
                    conditionMoney:this.conditionMoney,
                    isOpen:this.isOpen,
                    shareNum:this.shareNum,
                    expireTime:this.expireTime
                }
                //console.log(param)
                this.onSubmitAjax(param);
            }
        },
        //提交到服务器中保存修改
        onSubmitAjax(param){
            let _this = this;
            const querystring = require('querystring');
            this.$axios.post('/manage/coupon/update',querystring.stringify(param)).then(response=>{
                //console.log(response);
                if(response.data.code==200){
                    this.$message({
                        message: '恭喜你，修改成功',
                        type: 'success'
                    });
                    setTimeout(function(){
                        _this.$router.push({ path:'/coupon'})
                    },1500);

                }else{
                    this.$notify.error({
                        title: '修改失败',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }

            }).catch(error=>{
                console.log(error);
            });
        }
    }
}    
</script>
<style lang="stylus" scoped>
    .el-form-item .el-cascader{
        width :400px;
    }
    .el-cascader-menus .el-cascader-menu{
        width :240px
    }
    .sola-upload{
        .sola-left{
            width :100%;
            height :auto;
            .sola-flex{
                float:left
                width: 360px;
                height: 180px;
                margin-bottom 20px;
                margin-right:15px;
                position:relative;
                .delete{
                    position:absolute;
                    top:2px;
                    right:13px;
                    color: #f56c6c;
                    display:inline-block;
                    padding:5px 5px;
                    .el-alert__icon{font-size:28px;cursor:pointer}
                }
                img {
                    width:100%;
                    height:100%;
                }
            }
        }
        .sola-file-box{
            position:relative;
            .btn-file{
                position:absolute;
                top:0;
                left:0;
                z-index 1;
                opacity:0;
                width :120px;
                height :40px;
                outline: 0;
                background-color :none;
                cursor:pointer;
            }
        }

    }
</style>


